<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="上新"
      :visible.sync="chosenDialogShowed"
      :columns="chosenColumns"
      @submit="handleSubmitChosen"
    />
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="取标题"
      :visible.sync="titleDialogShowed"
      :columns="titleColumns"
      @submit="handleSubmitTitle"
    />
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="修改标题"
      :visible.sync="modifyTitleDialogShowed"
      :columns="modifyTitleColumns"
      @submit="handleSubmitModifyTitle"
    />
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import {newProductRegisterApi} from '@/feature/pdt/infra/api/newProductRegisterApi'
import CURDTable from '@/framework/components/table/CURDTable'
import {adminApi} from "@/feature/mgr/infra/api/adminApi";
import PdtNewProductRegisterStatusEnum from "@/feature/cmt/infra/constants/PdtNewProductRegisterStatusEnum";
import DialogColumnsForm from "@/framework/components/form/DialogColumnsForm";
import {dicApi} from "@/feature/sys/infra/api/dicApi";
import SysDicTypeEnum from "@/feature/sys/infra/constants/SysDicTypeEnum";
import DateType from "@/framework/constant/DateType";
import {storeApi} from "@/feature/mct/infra/api/storeApi";
import AdminTypeEnum from "@/feature/mgr/infra/constants/AdminTypeEnum";
import {complainFollowUpApi} from "@/feature/cmt/infra/api/complainFollowUpApi";
import NewStatusEnum from "@/feature/pdt/infra/constants/NewStatusEnum";
import TitleStatusEnum from "@/feature/pdt/infra/constants/TitleStatusEnum";
import DateUtil from "@/framework/infra/util/DateUtil";

export default {
  components: {DialogColumnsForm, CURDTable},
  data() {
    return {
      chosenDialogShowed: false,
      modifyTitleDialogShowed: false,
      titleDialogShowed: false,
      formData: {},
      chosenColumns: [
        {
          label: 'ID',
          width: 120,
          required: true,
          prop: 'productNo'
        }
        // {
        //   label: '编码',
        //   required: false,
        //   searchable: true,
        //   prop: 'productCode'
        // },
        // {
        //   label: '备注',
        //   type: ColumnType.TEXTAREA,
        //   required: false,
        //   prop: 'remark'
        // },
        // {
        //   label: '60个字符初始标题',
        //   required: true,
        //   type: ColumnType.TEXTAREA,
        //   prop: 'titleOrigin60'
        // }
      ],
      titleColumns: [
        {
          label: '链接1',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink'
        }, {
          label: '链接2',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink2'
        }, {
          label: '链接3',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink3'
        }, {
          label: '链接4',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink4'
        }, {
          label: '链接5',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink5'
        },
        {
          label: '主图',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          plainType: ColumnType.IMAGE,
          prop: 'mainImg'
        }, {
          label: 'Sku',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          prop: 'sku'
        }, {
          label: '备注',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          prop: 'remark'
        },
        {
          label: '60个字符初始标题',
          required: true,
          span: 24,
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 60
          },
          prop: 'titleOrigin60'
        },
        {
          label: '30个字符初始标题',
          type: ColumnType.NB_TEXTAREA,
          span: 24,
          renderOptions: {
            showWordLimit: true,
            maxlength: 30
          },
          required: true,
          prop: 'titleOrigin30'
        },
        {
          label: '20个字符初始标题',
          required: true,
          span: 24,
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 20
          },
          prop: 'titleOrigin20'
        },
        {
          label: '40个字符初始标题',
          span: 24,
          type: ColumnType.NB_TEXTAREA,
          required: true,
          renderOptions: {
            showWordLimit: true,
            maxlength: 40
          },
          prop: 'titleOrigin40'
        }
      ],
      modifyTitleColumns: [
        {
          label: '链接1',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink'
        }, {
          label: '链接2',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink2'
        }, {
          label: '链接3',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink3'
        }, {
          label: '链接4',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink4'
        }, {
          label: '链接5',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink5'
        },
        {
          label: '主图',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          plainType: ColumnType.IMAGE,
          prop: 'mainImg'
        },
        {
          label: 'Sku',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          prop: 'sku'
        }, {
          label: '备注',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          prop: 'remark'
        },
        {
          label: '60个字符初始标题',
          type: ColumnType.PLAIN_TEXT,
          renderOptions: {
            showWordLimit: true,
            maxlength: 60
          },
          prop: 'titleOrigin60'
        },
        {
          label: '60个字符修改后标题',
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 60
          },
          prop: 'titleAfter60'
        },
        {
          label: '30个字符初始标题',
          type: ColumnType.PLAIN_TEXT,
          renderOptions: {
            showWordLimit: true,
            maxlength: 30
          },
          prop: 'titleOrigin30'
        },
        {
          label: '30个字符修改后标题',
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 30
          },
          prop: 'titleAfter30'
        },
        {
          label: '20个字符初始标题',
          type: ColumnType.PLAIN_TEXT,
          renderOptions: {
            showWordLimit: true,
            maxlength: 20
          },
          prop: 'titleOrigin20'
        },
        {
          label: '20个字符修改后标题',
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 20
          },
          prop: 'titleAfter20'
        },
        {
          label: '40个字符初始标题',
          type: ColumnType.PLAIN_TEXT,
          renderOptions: {
            showWordLimit: true,
            maxlength: 40
          },
          prop: 'titleOrigin40'
        },

        {
          label: '40个字符修改后标题',
          renderOptions: {
            showWordLimit: true,
            maxlength: 40
          },
          type: ColumnType.NB_TEXTAREA,
          prop: 'titleAfter40'
        }
      ],
      option: {
        formLabelWidth: '70px',
        dialogWidth: '1440px',
        opWidth: 300,
        requestApi: newProductRegisterApi,
        showSelection: false,
        interceptor: {
          beforeCreate: (formData) => {
            if (formData.storeId) {
              newProductRegisterApi.lastProductCode(formData.storeId).then(data => {
                formData.productCode = data
              })
            }
          }
        },
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            span: 6,
            width: 120,
            type: ColumnType.SELECT,
            required: true,
            onChange: ({value, formData}) => {
              if (value) {
                newProductRegisterApi.lastProductCode(value).then(data => {
                  formData.productCode = data
                })
              }
            },
            options: storeApi.options()
          },
          {
            label: 'ID',
            width: 120,
            hiddenInForm: true,
            span: 6,
            searchable: true,
            required: true,
            prop: 'productNo'
          },
          {
            label: '60个字符初始标题',
            span: 6,
            hiddenInForm: true,
            width: 300,
            prop: 'titleOrigin60'
          },
          {
            label: '60个字符修改后标题',
            span: 6,
            width: 300,
            hiddenInForm: true,
            prop: 'titleAfter60'
          },
          {
            label: '主图',
            required: false,
            width: 100,
            span: 6,
            type: ColumnType.IMAGE,
            limit: 5,
            prop: 'mainImg'
          },
          {
            label: '编码',
            width: 200,
            type: ColumnType.TEXTAREA,
            // hiddenInForm: true,
            required: false,
            span: 6,
            searchable: true,
            prop: 'productCode'
          },
          {
            label: '类目',
            type: ColumnType.TEXTAREA,
            span: 6,
            // hiddenInForm: true,
            required: false,
            prop: 'categories'
          },
          {
            label: 'Sku',
            required: false,
            span: 6,
            width: 300,
            // hiddenInForm: true,
            type: ColumnType.TEXTAREA,
            prop: 'sku'
          },
          {
            label: '尺码',
            type: ColumnType.TEXTAREA,
            width: 300,
            required: false,
            span: 6,
            // hiddenInForm: true,
            prop: 'measurement'
          },
          {
            label: '价格',
            span: 6,
            required: false,
            type: ColumnType.TEXTAREA,
            // hiddenInForm: true,
            prop: 'price'
          },
          {
            label: '备注',
            type: ColumnType.TEXTAREA,
            width: 300,
            span: 6,
            // hiddenInForm: true,
            required: false,
            prop: 'remark'
          },
          {
            label: '是否翻转',
            required: false,
            width: 100,
            span: 6,
            defaultValue: 1,
            searchable: true,
            prop: 'overturnFlag',
            type: ColumnType.RADIO,
            options: YesNoEnum
          },
          {
            label: '选款师',
            prop: 'styleSelectorId',
            searchable: true,
            type: ColumnType.SELECT,
            span: 6,
            width: 100,
            required: true,
            options: adminApi.listAllOfType(AdminTypeEnum.STYLE_SELECTOR.id)
            // hiddenInForm: true
          },
          {
            label: '风格',
            required: false,
            span: 6,
            searchable: true,
            options: dicApi.allOptions(SysDicTypeEnum.STYLE.id),
            type: ColumnType.SELECT,
            width: 100,
            prop: 'style'
          },
          {
            label: '渠道',
            required: false,
            span: 6,
            width: 100,
            searchable: true,
            type: ColumnType.SELECT,
            options: dicApi.allOptions(SysDicTypeEnum.CHANNEL.id),
            prop: 'channel'
          },
          {
            label: '博主名称',
            searchable: true,
            required: false,
            width: 100,
            span: 6,
            prop: 'bloggerName'
          },
          {
            label: '美工是否已领取',
            span: 6,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.SELECT,
            searchable: true,
            options: YesNoEnum,
            prop: 'artHandled'
          },
          {
            label: '美工',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            span: 6,
            options: adminApi.listAll(),
            prop: 'artDesignerId'
          },
          // {
          //   label: '状态',
          //   hiddenInForm: true,
          //   width: 100,
          //   type: ColumnType.SELECT,
          //   searchable: true,
          //   options: PdtNewProductRegisterStatusEnum,
          //   prop: 'status'
          // },
          //
          {
            label: '上新状态',
            hiddenInForm: true,
            span: 6,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            options: NewStatusEnum,
            prop: 'newStatus'
          }, {
            label: '链接1',
            span: 6,
            required: true,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink'
          }, {
            label: '链接2',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink2'
          }, {
            label: '链接3',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink3'
          }, {
            label: '链接4',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink4'
          }, {
            label: '链接5',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink5'
          },
          {
            label: '标题状态',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            span: 6,
            options: TitleStatusEnum,
            prop: 'titleStatus'
          },
          {
            label: '运营助理',
            prop: 'opAssistantId',
            hiddenInForm: true,
            searchable: true,
            width: 100,
            span: 6,
            options: adminApi.listAll(),
            type: ColumnType.SELECT
          },

          {
            label: '30个字符初始标题',
            hiddenInForm: true,
            width: 240,
            span: 6,
            prop: 'titleOrigin30'
          },
          {
            label: '20个字符初始标题',
            hiddenInForm: true,
            span: 6,
            prop: 'titleOrigin20'
          },
          {
            label: '40个字符初始标题',
            hiddenInForm: true,
            span: 6,
            width: 300,
            prop: 'titleOrigin40'
          },

          {
            label: '修改标题人',
            hiddenInForm: true,
            span: 6,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            options: adminApi.listAll(),
            prop: 'titleModifierId'
          },
          {
            label: '30个字符修改后标题',
            span: 6,
            hiddenInForm: true,
            prop: 'titleAfter30'
          },
          {
            label: '20个字符修改后标题',
            hiddenInForm: true,
            prop: 'titleAfter20'
          },
          {
            label: '40个字符修改后标题',
            hiddenInForm: true,
            prop: 'titleAfter40'
          },
          {
            label: '博主日期',
            type: ColumnType.DATE,
            span: 6,
            width: 120,
            searchable: true,
            sortable: 'custom',
            // hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'bloggerDate'
          }, {
            label: '美工日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'artDate'
          }, {
            label: '上新日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'newDate'
          }, {
            label: '取标题日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'titleDate'
          }, {
            label: '修改标题日期',
            type: ColumnType.DATE,
            width: 130,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'titleModifyDate'
          },
          {
            label: '创建人',
            type: ColumnType.SELECT,
            searchable: true,
            width: 100,
            options: adminApi.listAll(),
            hiddenInForm: true,
            prop: 'creatorId'
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            searchable: true,
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE,
                defaultValue: [DateUtil.currentDate(), DateUtil.currentDate()]
              }
            },
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {
    handleChosen({arg}) {
      this.formData = {...arg}
      this.chosenDialogShowed = true
    },
    handleTitle({arg}) {
      this.formData = {...arg}
      this.titleDialogShowed = true
    },
    handleModifyTitle({arg}) {
      this.formData = {...arg}
      this.modifyTitleDialogShowed = true
    },
    handleArtHandled({arg}) {
      this.$confirm('确定领取吗?', '提示').then(() => {
        newProductRegisterApi.artHandled(arg.id).then(() => {
          arg.artHandled = 1
          this.$$notify('处理成功')
        })
      })
    },
    async handleSubmitChosen({done}) {
      try {
        await newProductRegisterApi.chosen(this.formData)
        this.$refs.table.reloadTable()
        this.chosenDialogShowed = false
      } finally {
        done()
      }
    },
    async handleSubmitTitle({done}) {
      try {
        await newProductRegisterApi.updateTitle(this.formData)
        this.$refs.table.reloadTable()
        this.titleDialogShowed = false
      } finally {
        done()
      }
    },
    async handleSubmitModifyTitle({done}) {
      try {
        await newProductRegisterApi.modifyTitle(this.formData)
        this.$refs.table.reloadTable()
        this.modifyTitleDialogShowed = false
      } finally {
        done()
      }
    }
  }
}
</script>

